﻿<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0 minimal-ui"/>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<title>vue组件2.0版本</title>
	<script type="text/javascript" src="js/vue2.js"></script>
	<script type="text/javascript">
	//  2.0template 里面的内容必需要有一个根元素包含如：div
	window.onload = function(){	
		//  2.0  推荐传递对象这种
		new Vue({
			el:"#box3",
			data:{
				datas:{   //2.0的支持传一个对象
					a:"我是父组件"
				}
			},
			components:{
				"my_aa":{
					props:['msg'],
					template:"#myaa",
					methods:{
						changes2(){
							this.msg.a = "我被修改了";
						}
					}
				}
				
			}
		});
		/*****
			借住mounted 子组件有自己的数据
		*****/
		
		new Vue({
			el:"#box4",
			data:{
				datas:{
					a:"我是父组件"
				}
			},
			components:{
				"my_aa":{
					data(){
						return {
							b:""
						}
					},
					props:['msg'],
					template:"#myaa2",
					mounted(){
						this.b = this.msg;
					},
					methods:{
						changes3(){
							this.b.a = "我被改了";
						}
					}
				}
				
			}
		});
		
		
		new Vue({
			el:"#box5",
			data:{
				a:"我是父组件"
			},
			components:{
				"my_aa":{
					data(){
						return {
							b:""
						}
					},
					props:['msg'],
					template:"#myaa3",
					mounted(){
						this.b = this.msg;
					},
					methods:{
						changes4(){
							this.b = "我被改了";
						}
					}
				}
				
			}
		});
	}
	
</script>
</head>
<body>
<!-- 2.0 -->
	<div id="box3">
		<p>{{datas.a}}</p>
		<my_aa :msg="datas"></my_aa>
	</div>
	<template id="myaa">
		<div>
			<h2>我是子组件2</h2>
			<input type="button" value="btn" @click="changes2()"/>
			<span>{{msg.a}}</span>
		</div>
	</template>
	<br />
	<br />
	<br />
	<!-- 借住mounted 子组件有自己的数据-->
	<div id="box4">
			<p>{{datas.a}}</p>
		<my_aa :msg="datas"></my_aa>
	</div>
	<template id="myaa2">
		<div>
			<h2>我是子组件3</h2>
			<input type="button" value="btn" @click="changes3()"/>
			<span>{{b.a}}</span>
		</div>
	</template> 
	<br />
	<br />
	<br />
	<div id="box5">
			<p>{{a}}</p>
		<my_aa :msg="a"></my_aa>
	</div>
	<template id="myaa3">
		<div>
			<h2>我是子组件4</h2>
			<input type="button" value="btn" @click="changes4()"/>
			<span>{{b}}</span>
		</div>
	</template>
</body>
</html>